<template>
	<view class='askquestion'>
		<view class="kong"></view>
		<view class="searchbox flexs1">
			<image class="back_img" src="../../static/image/ico_dh_bk@2x.png" @click="back"></image>
			<view class="top_kuang flexs1">
				<image class="border_serch" src="../../static/image/ico_ss@2x.png" mode=""></image>
				<input type="text" placeholder-style="font-size: 28rpx; color:#999999;" placeholder="输入关键字"
				 v-model="askvalue" @confirm='inputfinish'>
			</view>
			<view class='askquery' @click='gomyask'>
				<image class='askqueryimg' src='../../static/image/zxwb_ico_tw@2x.png'></image>
				<view style="font-size: 22rpx;">提问</view>
			</view>
		</view>
		<view class='categoryone'>
			<view class='onitem ' :class="{'activetoggle':currntIndex == 0}"  @click='changebtn(0)'>全部提问</view>
			<view class='onitem'  :class="{'activetoggle':currntIndex == 1}"  @click='changebtn(1)'>未解决</view>
			<view class='onitem'  :class="{'activetoggle':currntIndex == 2}"  @click='changebtn(2)'>已解决</view>
		</view>
		<view class='categorytwo' v-if='!is_show'>
			<view class='inview'>
				<view class='itembox' :class="{'twoactivetoggle':chooseIndex == -1}" @click="choosethis(-1)">不限</view>
				<block v-for='(item,index) in questionreasonlist' :key='index'>
					<view class='itembox' :class="{'twoactivetoggle':chooseIndex == index}" @click='choosethis(index)'>{{item.name}}</view>
				</block>
			</view>
			<view class='addimgbox'>
				<image src='../../static/image/zxwb_ico_tj@2x.png' class='addimg' @click='showcategory'></image>
			</view>
		</view>
		<view v-if='is_show' class="choosecategory">
			<image class='closeimg' @click='colsechoosebtn' src='../../static/image/zxwb_ico_gb@2x.png'></image>
			<view class='titlechoose'>请选择类型</view>
			<view class='itemcategorybox'>
				<block v-for='(item,index) in questionreasonlist' :key='index'>
					<view class='itemcategory' :class="{'activecolor':chooseIndex == index}" @click='choosethis(index)'>{{item.name}}</view>
					
				</block>
			</view>
		</view>
		
		<view class='commentbox' v-if="questionlist.length != 0&&is_show==false">
			<block v-if='questionlist.length != 0'>
				<view class="comment_title">
				<view class="comment_line"></view>问题列表({{questionallnum}})</view>
				<block v-for='(item,index) in questionlist' :key='index'>
					<view class="item_comment"  @click='goquestiondetail(item.id)'>
						<view class='titlebox'>
							<image class='avatarimg' :src='picture.getImgUrl(item.user.avatar) '></image>
							<view class='titlebox_right'>
								<view class='nickname'>{{item.user.nickname}}</view>
								<view class='timescreen'>{{item.createtime}}</view>
							</view>
						</view>
						<view class='contentcontent'>{{item.content}}</view>
						<view class='bottombox'>
							<view class='itembottom'>
								<image class='iconcomment' src='../../static/image/zpzx_ico_pl@2x.png'></image>
								<view>{{item.comment_num}}</view>
							</view>
							<view class='itembottom'></view>
							<view class='itembottom'></view>
						</view>
					</view>
				</block>
			</block>
			
		</view>
		<!-- 搜索结果为空样式 -->
		<block v-if='questionlist.length == 0&&is_show==false'>
			<view class="none_box" >
				<view class="none_kong"></view>
				<image src="../../static/image/zcht_img_k@2x.png"></image>
				<view>暂无信息</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {askcate,ackindex} from '@/api/data.js'
	export default {
		data() {
			return {
				askvalue:'',
				currntIndex:0,//第一行选择
				status:'',
				
				chooseIndex:-1,//分类选择
				questionreasonlist:'',
				cate_ids:'',
				is_show:false,
				
				questionlist:[],
				questionallnum:'',
				firstload:true,
				
				page:1,
				limit:10,
			}
		},
		onLoad() {
			this.getcategory()//获取分类
		},
		onShow() {
			if(!this.firstload){
				this._getasklist()//默认获取问题列表
			}
		},
		methods: {
			getcategory(){
				askcate().then(res=>{
					if(res.code == 1){
						this.questionreasonlist = res.data
						this._getasklist()
						this.firstload = false
					}else{
						this.$msg(res.msg)
					}
				})
			},
			choosethis(num){//改变第二层类选择也要请求
				this.chooseIndex = num
				this._getasklist()
			},
			changebtn(num){//改变状态
				this.currntIndex = num
				this._getasklist()
			},
			inputfinish(){
				this._getasklist()
			},
			_getasklist(){
				var obj = null
				if(this.currntIndex == 0){
					this.status = ''
				}else if(this.currntIndex == 1){
					this.status = 1
				}else{
					this.status = 2
				}
				if(this.chooseIndex == -1){
					obj = {
						page:this.page,
						limit:this.limit,
						status:this.status,//	1=未解决,2=已解决 空为全部
						search:this.askvalue,
						cate_ids:''
					}
				}else{
					obj = {
						page:this.page,
						limit:this.limit,
						status:this.status,//	1=未解决,2=已解决 空为全部
						search:this.askvalue,
						cate_ids:this.questionreasonlist[this.chooseIndex].id
					}
				}
				ackindex(obj).then(res=>{
					if(res.code == 1){
						if(this.page == 1){
							this.questionallnum = res.data.count
							this.questionlist = res.data.list
						}else{
							this.questionallnum = res.data.count
							this.questionlist = this.questionlist.concat(res.data.list) 
						}
						
					}else{
						this.$msg(res.msg)
					}
				})
				
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			gomyask(){
				uni.navigateTo({
					url:'../myask/myask'
				})
			},
			showcategory(){
				this.is_show = true
			},
			colsechoosebtn(){
				this.is_show = false
			},
			goquestiondetail(id){
				uni.navigateTo({
					url:'answerquestiondetail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.askquestion{
		height:100vh;
		width:100vw;
		background-color: #F5F5F5;
	}
	.kong {
		width: 100%;
		height: var(--status-bar-height);
		background-color: #FFFFFF;
	}
	.searchbox{
		height:auto;
		padding: 10rpx 0;
		width:100%;
		background-color: #FFFFFF;
	}
	.back_img {
		width: 20rpx;
		height: 36rpx;
		margin: 0 20rpx 0 30rpx;
	}
	
	.top_kuang {
		width: 570rpx;
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}
	
	.border_serch {
		width: 28rpx;
		height: 30rpx;
		margin: 0 20rpx 0 25rpx
	}
	
	uni-input {
		width: 520rpx;
	}
	.askquery{
		display: flex;
		flex-direction: column;
		align-items: center;
		/* border:1rpx solid red; */
	}
	.askqueryimg{
		width:36rpx;
		height:36rpx;
		margin-bottom: 5rpx;
	}
	
	.categoryone{
		height:80rpx;
		width:100%;
		padding:0 30rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.onitem{
		position:relative;
		width:150rpx;
		text-align: center;
		height:auto;
		/* border:1rpx solid red; */
		font-size: 30rpx;
	}
	.activetoggle,.twoactivetoggle{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.activetoggle::after{
		content:'';
		display: block;
		position: absolute;
		bottom:-10rpx;
		left:50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background: #FFDD47;
		border-radius: 2rpx;
	}
	.twoactivetoggle::after{
		content:'';
		display: block;
		position: absolute;
		bottom:-10rpx;
		left:50%;
		transform: translateX(-50%);
		width: 30rpx;
		height: 4rpx;
		background: #FFDD47;
		border-radius: 2rpx;
	}
	
	.categorytwo{
		width:100%;
		height:100rpx;
		/* border:1rpx solid red; */
		position:relative;
		background-color: #FFFFFF;
	}
	.inview{
		width:85%;
		height:100rpx;
		display: flex;
		align-items: center;
		/* overflow: hidden; */
		overflow-y: scroll;
		/* border:1rpx solid red; */
		padding-left: 10rpx;
	}
	.itembox{
		padding: 0 10rpx;
		flex-shrink: 0;
		position:relative;
	}
	.addimgbox{
		position: absolute;
		z-index: 99;
		top:50%;
		right:10rpx;
		transform: translateY(-50%);
		/* background: #000000; */
		/* opacity: 0.1; */
		border-left: 1rpx solid #EEEEEE;
		height:50rpx;
		width:66rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.addimg{
		width:26rpx;
		height:26rpx;
	}
	
	
	/* 评价列表 */
	.commentbox{
		width:100%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		height:auto;
		padding: 30rpx 30rpx 0rpx;
	}
	
	/* 搜索结果为空样式 */
	.none_box {
		width: 100%;
		height: 520rpx;
		font-size: 26rpx;
		color: #666666;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.none_kong {
		width: 100%;
		height: 168rpx;
	}
	
	.none_box image {
		width: 354rpx;
		height: 253rpx;
	}
	/* 搜索结果为空样式 */
	
	.comment_title{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.comment_line{
		width: 4rpx;
		height: 20rpx;
		background: #FFDD47;
		border-radius: 2rpx;
		margin-right: 10rpx;
	}
	.item_comment{
		/* border:1rpx solid red; */
		padding-bottom: 30rpx;
	}
	.titlebox{
		display: flex;
		justify-content: flex-start;
		width:100%;
		height:auto;
	}
	.avatarimg{
		height:70rpx;
		width:70rpx;
		border-radius: 50%;
	}
	.titlebox_right{
		margin-left: 20rpx;
		height:70rpx;
		width:auto;
		/* border:1rpx solid red; */
		display: flex;
		/* align-items: ; */
		flex-direction: column;
		justify-content: space-around;
	}
	.nickname{
		height:30rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		width:300rpx;
	}
	.timescreen{
		height: 30rpx;
		line-height: 30rpx;
		width:300rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.contentcontent{
		margin:10rpx 0rpx 10rpx;
	}
	
	/* 评论图标 */
	.bottombox{
		width:100%;
		height:50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.itembottom{
		/* width:200rpx; */
		width:auto;
		height:50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.iconcomment{
		width:28rpx;
		height:26rpx;
		margin-right: 20rpx;
	}
	/* 评价列表 */
	
	
	/* 类型选择 */
	.choosecategory{
		width:100%;
		height:100%;
		position:relative;
		/* padding: 0 30rpx; */
		padding: 0 7rpx;
		background-color: #FFFFFF;
	}
	.titlechoose{
		height:100rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		padding-top: 40rpx;
		padding-left: 17rpx;
		line-height: 60rpx;
		width:100%;
	}
	.closeimg{
		height:21rpx;
		width:21rpx;
		position:absolute;
		top:30rpx;
		right:30rpx;
	}
	.itemcategorybox{
		height:auto;
		width:100%;
		display: flex;
		/* justify-content: space-between; */
		justify-content: flex-start;
		flex-wrap:wrap;
	}
	.itemcategory{
		width: 164rpx;
		height: 70rpx;
		margin: 0 10rpx;
		text-align: center;
		line-height: 70rpx;
		border: 1rpx solid #F5F5F5;
		background: #F5F5F5;
		border-radius: 6rpx;
		margin-bottom: 20rpx;
	}
	.activecolor{
		border: 1rpx solid #FCB630;
		background: #FFEDCA;
		
	}
</style>
